<template>
    <div class="con">

        <img src="../assets/images/hb/header.png" alt="" class="header">

        <div class="main">

            <div class="ewm">
                <!-- <img :src="url" alt=""> -->
                <div id="qrcode">
                    <!-- <img src="../assets/images/award/header.png" alt=""> -->

                </div>
                <p>请用户打开支付宝APP扫一扫</p>
                <p style="color:#2895A3;margin-top:20px">30分钟有效，过期重新进入页面</p>

            </div>

        </div>

        <div class="title">
            <img src="../assets/images/hb/money.png" alt="" class="img1">
            <span> 提额说明</span>
            <img src="../assets/images/hb/money.png" alt="" class="img2">

        </div>
        <div class="p">
            <p> 1、花呗专享临时额度仅限在指定商家使用，具体商家以领取页面为准; </p>
            <p> 2、花呗专享临时额度目前仅限部分花呗用户领取; </p>
            <p> 3、领取后支付优先使用普通花呗额度，超出部分使用专属临时额度;</p>
            <p> 4、账户统一时间只能生效一种临时额度，若已领取其他临时额度，则无法领取专属额度; </p>
            <p> 5、临时额度存在一部分时限，具体有效期以页面提示为准；</p>
            <p> 6、领取后可在花呗-我的额度页面查看明细。</p>
        </div>

    </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
    name: "hbAmount",
    data() {
        return {
            url: "",
            vendorId: ""
        };
    },
    methods: {},
    mounted() {
        this.vendorId = this.$route.query.vendorId;
        var timestamp = Date.parse(new Date());
        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/h5/param/vendor/getenhancelimiturl.do?appid=web.2018&timestamp=${timestamp}`,
            data: {
                vendorId: this.vendorId
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    this.url = response.data.data.url;
                    let qrcode = new QRCode("qrcode", {
                        width: 200,
                        height: 200, // 高度
                        text: this.url // 二维码内容
                    });
                } else {
                    this.$Message.error(response.data.message);
                }
            })
            .catch(function(error) {
                console.log(error);
            });

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #2895a3;
    position: relative;
}
.header {
    width: 100%;
}
.main {
    width: 90%;
    background: #fff;
    height: 330px;
    margin-left: 5%;
    margin-top: 0%;
    position: relative;
    box-shadow: 0px 4px 10px 0px #1a828d;
    border-radius: 6px;
}
.main img {
    width: 200px;
    height: 200px;
}
.ewm {
    position: absolute;
    width: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 200px;
    height: 200px;

    top: 12%;
}
.ewm p {
    text-align: center;
    margin-top: 10px;
    color: #333;
    font-size: 14px;
}
.title {
    text-align: center;
    position: relative;
    margin-top: 30px;
    color: #fffbc2;
}
.title img {
    width: 12px;
    vertical-align: middle;
}
.title span {
    padding: 0px 5px;
}
.p {
    width: 90%;
    margin-left: 5%;
    margin-top: 15px;
    color: #fff;
    padding-bottom: 37px;
}
</style>
